<template>
	<scroll-view class="content" scroll-y="true" scroll-with-animation="true">
		<view class="pay">
			<view class="main">
				<view class="main-title">{{ name }}客户的八字终生运排盘</view>
				<view>
					<view class="xingming">姓名:{{ name }} 性别：{{ sex == 0 ? '男' : '女' }}</view>
					<view style="padding-top: .25rem;" class="box">

						<view class="fade-in delay1000 order-bz1">
							<view class="order-bz__sub">
								<view class="year">年</view>
								<view data-inner="乙" data-outer="亥" class="J_bz1">*</view>
							</view>
						</view>
						<view class="fade-in delay1000 order-bz2">
							<view class="order-bz__sub">
								<view class="year">月</view>
								<view data-inner="壬" data-outer="午" class="J_bz1">*</view>
							</view>
						</view>
						<view class="fade-in delay1000 order-bz3">
							<view class="order-bz__sub">
								<view class="year">日</view>
								<view data-inner="癸" data-outer="巳" class="J_bz1">*</view>
							</view>
						</view>
						<view class="fade-in delay1000 order-bz4">
							<view class="order-bz__sub">
								<view class="year">时</view>
								<view data-inner="壬" data-outer="子" class="J_bz1">*</view>
							</view>
						</view>

					</view>
					<view class="item item11 J_item11">
						<view class="fade-in delay250 order-top-title">
							{{ name }}的终生运势报告
						</view>
						<p class="fade-in delay250 order-top-words"> 欠缺五行：五行缺* </p>
						<p class="fade-in delay750 order-top-words"> 姻缘财禄贵荣，尽在终生运势报告 </p>
					</view>
				</view>
			</view>
			<view class="printer-container">
				<p class="order-loading">{{ text }}</p>
			</view>
			<view class="order-wheel__wrap">
				<view class="order-wheel J_order_wheel">
					<view class="order-wheel__outer J_order_wheel_outer">
						<view class="active selected1 " title="子">
						</view>
						<view class="active selected2" title="丑">
						</view>
						<view class="active selected3" title="寅">
						</view>
						<view class="active selected4" title="卯">
						</view>
						<view class="active selected5" title="辰">
						</view>
						<view class="active selected6" title="巳">
						</view>
						<view class="active selected7" title="午">
						</view>
						<view class="active selected8" title="未">
						</view>
						<view class="active selected9" title="申">
						</view>
						<view class="active selected10" title="酉">
						</view>
						<view class="active selected11" title="戌">
						</view>
						<view class="active selected12" title="亥">
						</view>
					</view>


					<view class="order-wheel__inner J_order_wheel_inner">
						<view class="selecteds1 active1" title="甲">
						</view>
						<view class="selecteds2 active1" title="乙">
						</view>
						<view class="selecteds3 active1" title="丙">
						</view>
						<view class="selecteds4 active1" title="丁">
						</view>
						<view class="selecteds5 active1" title="戊">
						</view>
						<view class="selecteds6 active1" title="己">
						</view>
						<view class="selecteds7 active1" title="庚">
						</view>
						<view class="selecteds8 active1" title="辛">
						</view>
						<view class="selecteds9 active1" title="壬">
						</view>
						<view class="selecteds10 active1" title="癸">
						</view>
					</view>


					<view class="order-wheel__center J_order_wheel_center">
					</view>
				</view>
			</view>
			<view class="order-wrap">
				<view class="order-pay">
					<p class="order-pay__title">
						<image class="m-img" src="/static/images/logo/yunshi.png" mode="widthFix"></image>
					</p>
					<view class="order-pay__con">
						<view class="opc__top">
							<view class="opc__left">
								<view class="money">
									<text class="monery-xsyh">
										限时优惠：
									</text>
									￥
									<text class="money-num">
										39.80
									</text>
									元
								</view>
								<del style="color: #999;">原价￥238元</del>
							</view>
							<view class="opc__right">
								<view class="youhui">距优惠结束</view>
								<u-count-down :time="2 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
									@change="onChange">
									<view class="time">
										<text
											class="time__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}:</text>
										<text class="time__item">{{ timeData.minutes }}:</text>
										<text class="time__item">{{ timeData.seconds }}</text>
									</view>
								</u-count-down>
							</view>
						</view>
						<view class="opc__bottom">
							已有
							<text class="opc__bottom-text">1831768</text>
							人购买，
							<text class="opc__bottom-text">98%</text>
							的用户反馈报告对他们的
							<text class="opc__bottom-text">事业、感情和财富</text>
							给予了积极的帮助。
						</view>
					</view>
					<view class="public_pay_box">
						<a target="_blank" class="pay_wx" data-method="Wechatpay3" @click="openPhone('wx')">
							微信支付
						</a>
						<a data-method="Alipay2" target="_blank" class="pay_zfb" @click="openPhone('zfb')">
							支付宝
						</a>
					</view>
					<view class="public_pay_tip">
						微信支付成功后，需返回当前浏览器查看结果！
					</view>
				</view>

				<view class="order-lock J_payBottomShow">
					<p class="order-lock__title">
						<view class="order-lock__title-get">
							支付后你将获得
						</view>
					</p>
					<view class="ol-box">
						<p class="ol-box__title">
							一生各时期运势起伏
						</p>
						<view class="ol-box__con">
							<image class="m-img" src="/static/images/logo/1_img_1.fee1e2ae.png" mode="widthFix"></image>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>

					<view class="ol-box">
						<p class="ol-box__title">
							一生运势概述和点评
						</p>
						<view class="ol-box__con">
							<view>
								一生
								<text class="red">祸福几何</text>
								？
								<text class="red">中年危机</text>
								如何渡过？
								<text class="red">
									晚年生活
								</text>
								是否如意？
							</view>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>


					<view class="ol-box">
						<p class="ol-box__title">
							求财路能否一帆风顺
						</p>
						<view class="ol-box__con">
							<view>

								<text class="red">发财路</text>
								在哪里？怎样
								<text class="red">避免钱财流失</text>
								？如何赚
								<text class="red">
									更多的钱
								</text>
								？
							</view>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>

					<view class="ol-box">
						<p class="ol-box__title">
							今生姻缘和感情变化
						</p>
						<view class="ol-box__con">
							<view>
								适合
								<text class="red">早婚还是晚婚</text>
								，婚前婚后
								<text class="red">态度变化</text>
								，会遇到的
								<text class="red">
									变数
								</text>
								。
							</view>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>


					<view class="ol-box">
						<p class="ol-box__title">
							事业方向该如何选择
						</p>
						<view class="ol-box__con">
							<view>
								<text class="red">事业发展</text>
								顺利吗？何时会有
								<text class="red">瓶颈或危机</text>
								？什么职业适合我？
							</view>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>


					<view class="ol-box">
						<p class="ol-box__title">
							困难时期运势和策略
						</p>
						<view class="ol-box__con">
							<view>
								平时的
								<text class="red">人际关系</text>
								，有无
								<text class="red">贵人提携</text>
								，有没有需要注意的地方？
							</view>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>

					<view class="ol-box">
						<p class="ol-box__title">
							健康运势和规避
						</p>
						<view class="ol-box__con">
							<view>
								自身
								<text class="red">体质强弱</text>
								，需要预防哪些
								<text class="red">易患疾病</text>
								或
								<text class="red">身体损伤</text>
								？
							</view>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>
					<view class="ol-box">
						<p class="ol-box__title">
							家庭和睦和健康建议
						</p>
						<view class="ol-box__con">
							<view>
								家庭
								<text class="red">幸福和谐</text>
								吗？不同时期，家人需要注意的健康问题。
							</view>
							<a class="J_payPopupShow btn" @click="openDialog"></a>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="public_footer_servers">
			<image class="public_foot_xin" alt="诚信、可信网站" src="/static/images/logo/img_foot_xin (2).webp"
				mode="widthFix">
			</image>
			<image alt="阿里云提供数据安全保护" class="public_foot_al" src="/static/images/logo/img_foot_al (2).webp"
				mode="widthFix">
			</image>
		</view>
		<view class="public_paybottom_height"></view>
		<view :class="{'public_pay_bottom-span--hidden':isVisable}" class="public_pay_bottom">
			<text class="public_pay_bottom-text" @click="openDialog"></text>
		</view>
		<uni-popup ref="popups" background-color="#fff">
			<view class="zhifu">
				<view style="text-align: center;">
					一次付费，查看所有结果
				</view>
				<view style="text-align: center;">
					<text>
						统一鉴定价：
					</text>
					<Strong style="color: #ce0000;font-size: 18px">
						￥39.80元
					</Strong>
				</view>
				<view class="public_pay_box">
					<u-button class="wxPay" @click="openPhone('wx')"></u-button>
					<u-button class="zfbPay" @click="openPhone('zfb')"></u-button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupes" background-color="#fff" :mask-click="false">
			<view class="phoneNumber">
				<view style="text-align: center;">
					输入手机号后解锁查看所有测试结果
				</view>
				<uni-easyinput placeholder="请输入手机号" v-model="poneNumber" type="number"
					:clearable="false"></uni-easyinput>
				<u-button class="btn-style" @click="savePhone">确定</u-button>
			</view>
		</uni-popup>
		<uni-popup ref="popupesWX" background-color="#fff" :mask-click="false">
			<view class="uv-qrcode">
				<text>扫码进行付款</text>
				<uv-qrcode ref="qrcode" size="200px" :value="qrcode"></uv-qrcode>
				<u-button class="payButton" @click="isPay">我已支付</u-button>
			</view>
		</uni-popup>
		<u-toast ref="uToast"></u-toast>
	</scroll-view>
</template>
<script>
	import {
		createPayWxPay,
		customer,
		getCustomerInfoByOrderNum,
		getOrderDataByOrderNum,
		jsApiPay,
		measure,
		aliPayOrder,
		aliWebPayOrder,
		mhWeChatPayOrder,
		paymentStatus,
		priceData,
		statistics,
		updatePayStatusByOrderNum,
		uploadConvertData
	} from "@/api/system/system";
	import store from "@/store";
	import axios from "axios";

	export default {
		data() {
			return {
				qrcode: null,
				form: {},
				poneNumber: null,
				text: '',
				isVisable: true,
				timeData: {},
				fontSize: '.3rem',
				bgColor: '#263653',
				color: '#FFF',
				text1: '本网页数据安全由阿里云提供，严格按照法律法规和用户协议对您的信息进行全方位保护，请放心使用，测试仅供娱乐！',
				payStatus: null,
				myStateInterval: null,
				price: null,
				orderNumber: null,
				bd_vid: null,
				Url: null,
				customerId: null,
				name: null,
				sex: null,
				birthday: null,
				windowUrl: null,
				$chou: null,
			}
		},
		created() {
			//在窗口滚动时调用监听窗口滚动方法
			window.addEventListener('scroll', this.windowScrollListener);
		},
		onLoad(option) {
			this.$chou = localStorage.getItem('$chou')
			this.bd_vid = localStorage.getItem('bd_vid')
			this.customerId = localStorage.getItem('customerId')
			this.name = localStorage.getItem('name')
			this.sex = localStorage.getItem('sex')
			this.birthday = localStorage.getItem('birthday')
			//获取订单信息
			this.getOrderNumberStatus()
			//截图Url
			this.getUrl()
			//判断是电脑还是手机
			this.detectDevice()
			//绘制动画
			this.startPrinting()
		},
		mounted() {
			//转盘动画
			this.add()
		},
		destroyed() {
			clearInterval(this.myStateInterval)
			//离开页面时删除该监听
			window.removeEventListener('scroll', this.windowScrollListener)
		},
		methods: {
			getOrderNumberStatus() {
				let params = {
					orderNumber: localStorage.getItem('orderNumber')
				}
				getOrderDataByOrderNum(params).then(res => {
					if (res.data) {
						this.showModal()
					} else {

					}
				}).catch(() => {})
			},
			//打开支付的确认
			showModal() {
				uni.showModal({
					title: '温馨提示',
					content: `您已经成功付款了吗?`,
					success: res => {
						if (res.confirm) {
							let params = {
								orderNumber: localStorage.getItem('orderNumber')
							}
							paymentStatus(params).then(res => {
								this.payStatus = res.rows[0].payStatus
								if (this.payStatus == '0') {
									this.$tab.navigateTo(
										`/pages/submitPhoneNum/index?bd_vid=${this.bd_vid}&$chou=${this.$chou}`
									)
									this.loading = false
								} else {
									this.$refs.uToast.show({
										message: '订单未支付！'
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			//生成随机数
			generateUniqueRandomWithSet() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				let timestampPart = (Date.now() * Math.random()).toString().slice(0, 10);
				let randomPart = Math.floor(Math.random() * 100000).toString().padStart(5, '0');
				this.orderNumber = `${year}${month}${day}` + timestampPart + randomPart;
				localStorage.setItem('orderNumber', this.orderNumber)
			},
			//我已支付按钮
			isPay() {
				let params = {
					orderNumber: localStorage.getItem('orderNumber')
				}
				paymentStatus(params).then(res => {
					this.payStatus = res.rows[0].payStatus

					if (this.payStatus == '0') {
						// this.$tab.navigateTo(`/pages/submitPhoneNum/index?bd_vid=${this.bd_vid}&$chou=${this.$chou}`)
						this.$tab.navigateTo(
							`/pages/submitPhoneNum/index?bd_vid=${this.bd_vid}&$chou=${this.$chou}`)
					}
				})
			},
			//判断是电脑还是手机，seen不是手机则显示
			detectDevice() {
				const userAgent = navigator.userAgent;
				const isMobile = /Mobile|iP(hone|od)|Android/.test(userAgent);
				// 上线时取消注释
				// this.seen = !isMobile;
				this.seen = false;
			},
			getUrl() {
				if (window.location.href.includes('/#')) {
					this.windowUrl = window.location.href.split("/#")[0]
				} else {
					this.windowUrl = window.location.href.split("/?")[0]
				}
			},
			//微信二维码pc支付
			SMpay() {
				let params = {
					"orderNumber": localStorage.getItem('orderNumber'),
					"customerId": this.customerId,
					"domainUrl": this.windowUrl,
					"description": this.name + '的八字测算'
				}
				createPayWxPay(params).then((res) => {
					if (res.code == 500) {
						this.$refs.uToast.show({
							message: '订单已经支付！'
						})
					} else {
						this.qrcode = res.msg
						this.$refs.popupesWX.open()
					}
				}).catch(error => {})
			},
			//微信手机支付
			toPay() {
				if (this.payStatus == '1') {
					this.$tab.navigateTo(`/pages/submitPhoneNum/index?bd_vid=${this.bd_vid}&$chou=${this.$chou}`)
				} else {
					let params = {
						"orderNumber": localStorage.getItem('orderNumber'),
						"customerId": this.customerId,
						"domainUrl": this.windowUrl,
						"payType": 1,
						"description": this.name + '的八字测算',
						"returnUrl": this.windowUrl + `/#/pages/shenchenxp_order/index`
					}
					mhWeChatPayOrder(params).then((res) => {
						if (res.msg === '201') {
							this.generateUniqueRandomWithSet()
							let params = {
								"orderNumber": localStorage.getItem('orderNumber'),
								"customerId": this.customerId,
								"domainUrl": this.windowUrl,
								"payType": 1,
								"description": this.name + '的八字测算',
								"returnUrl": this.windowUrl + `/#/pages/shenchenxp_order/index`
							}
							mhWeChatPayOrder(params).then((res) => {
								window.location.assign(res.data.data.payUrl);
							}).catch(error => {})
						} else {
							window.location.assign(res.data.data.payUrl);
						}
					}).catch(error => {})
				}
			},
			//支付宝支付手机端，之前是用的米花支付mhAliPayOrder
			toPayZfbL() {
				if (this.payStatus == '1') {
					this.$tab.navigateTo(`/pages/submitPhoneNum/index?bd_vid=${this.bd_vid}&$chou=${this.$chou}`)
				} else {
					let params = {
						"orderNumber": localStorage.getItem('orderNumber'),
						"customerId": this.customerId,
						"domainUrl": this.windowUrl,
						"description": this.name + '的八字测算',
						"payType": 0,
						"returnUrl": this.windowUrl + `/#/pages/shenchenxp_order/index`
					}
					aliPayOrder(params).then((res) => {
						if (res.msg === '201') {
							// this.generateUniqueRandomWithSet()
							let params = {
								"orderNumber": localStorage.getItem('orderNumber'),
								"customerId": this.customerId,
								"domainUrl": this.windowUrl,
								"payType": 0,
								"description": this.name + '的八字测算',
								"returnUrl": this.windowUrl + `/#/pages/shenchenxp_order/index`
							}
							aliPayOrder(params).then((res) => {
							// window.location.assign(res.data.data.payUrl);
							  document.querySelector('body').innerHTML = res.msg;//查找到当前页面的body，将后台返回的form替换掉他的内容
							  document.forms[0].submit(); 
							}).catch(error => {})
						} else {
							// window.location.assign(res.data.data.payUrl);
							document.querySelector('body').innerHTML =  res.msg;//查找到当前页面的body，将后台返回的form替换掉他的内容
							document.forms[0].submit(); 
						}
					}).catch(error => {})
				}
			},
			//支付宝支付pc端，之前用的米花支付mhAliWebPayOrder
			toPayZfbPc() {
				let params = {
					"orderNumber": localStorage.getItem('orderNumber'),
					"customerId": this.customerId,
					"domainUrl": this.windowUrl,
					"description": this.name + '的八字测算',
					"payType": 0,
					"returnUrl": this.windowUrl + `/#/pages/shenchenxp_order/index`
				}
				aliWebPayOrder(params).then((res) => {
					//this.qrcode = res.data.data.qrCode
					this.qrcode = res.msg
					this.$refs.popupesWX.open()
				}).catch(error => {})
			},
			add() {
				let arr = setTimeout(function() {
					document.querySelector('.order-wheel__outer').style.transform = 'rotate(30deg)';
					document.querySelector('.order-wheel__inner').style.transform = 'rotate(324deg)';
				}, 1500);


				let arr4 = setTimeout(function() {
					document.querySelector('.selected12').classList.add('activitys');
					document.querySelector('.selecteds2').classList.add('activityes');
				}, 3000);

				let arr1 = setTimeout(function() {
					document.querySelector('.selected12').classList.remove('activitys');
					document.querySelector('.selecteds2').classList.remove('activityes');
					document.querySelector('.order-wheel__outer').style.transform = 'rotate(180deg)';
					document.querySelector('.order-wheel__inner').style.transform = 'rotate(72deg)';
				}, 3500);


				let arr5 = setTimeout(function() {
					document.querySelector('.selected7').classList.add('activitys');
					document.querySelector('.selecteds9').classList.add('activityes');
				}, 5000);


				let arr2 = setTimeout(function() {
					document.querySelector('.selected7').classList.remove('activitys');
					document.querySelector('.selecteds9').classList.remove('activityes');
					document.querySelector('.order-wheel__outer').style.transform = 'rotate(210deg)';
					document.querySelector('.order-wheel__inner').style.transform = 'rotate(36deg)';
				}, 5500);


				let arr6 = setTimeout(function() {
					document.querySelector('.selected6').classList.add('activitys');
					document.querySelector('.selecteds10').classList.add('activityes');

				}, 7000);


				let arr3 = setTimeout(function() {
					document.querySelector('.selected6').classList.remove('activitys');
					document.querySelector('.selecteds10').classList.remove('activityes');
					document.querySelector('.order-wheel__outer').style.transform = 'rotate(360deg)';
					document.querySelector('.order-wheel__inner').style.transform = 'rotate(72deg)';
				}, 7500);


				let arr7 = setTimeout(function() {
					document.querySelector('.selected1').classList.add('activitys');
					document.querySelector('.selecteds9').classList.add('activityes');
				}, 9000);

				let arr8 = setTimeout(function() {
					document.querySelector('.xingming').style.display = 'none';
					document.querySelector('.box').style.display = 'none';
					document.querySelector('.main-title').style.display = 'none';
					document.querySelector('.order-wheel__wrap').style.display = 'none';
					document.querySelector('.J_item11').style.display = 'unset';
					document.querySelector('.order-wrap').style.display = 'block';

				}, 9900);
			},
			startPrinting() {
				const text = "正在录入你的生辰八字..."; // 需要打印的文字
				let index = 0;
				const timer = setInterval(() => {
					this.text += text[index];
					index++;
					if (index === text.length) {
						clearInterval(timer);
					}
				}, 200);
			},
			openDialog() {
				this.$refs.popups.open()
			},
			//点微信支付和支付宝支付
			openPhone(type) {
				//微信支付
				if (type === 'wx') {
					//不是手机
					if (this.seen) {
						this.SMpay()
					} else {
						this.toPay()
					}
				} else {
					//不是手机
					if (this.seen) {
						this.toPayZfbPc()
					} else {
						this.toPayZfbL()
					}
				}
			},
			windowScrollListener() {
				var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop >= 300) {
					this.isVisable = false;
				}
				if (scrollTop < 300) {
					this.isVisable = true;
				}
			},
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>
<style lang="scss" scoped>
	.phoneNumber {
		padding: 20px;
		line-height: 2.4;
		font-size: .13rem;
	}

	/deep/ .uni-popup__wrapper {
		width: 80%;
		border-radius: 8px;
	}

	.zhifu {
		line-height: 1.4;
		padding: 40rpx 0;
		font-size: .16rem;
	}

	.content {
		background-color: #864a30;
		font: 14px / 1.4 'Microsoft Yahei', Arial, Helvetica, sans-serif;
	}

	.imageKnow_img {
		width: 100%;
		display: block;
	}

	.obp_user {
		margin-top: 20px;
	}

	.obp_right {
		text-align: center;
		line-height: 24px;
		color: #2b2b2b;
		margin-top: 20px;

		.obp_right-b {
			display: inline-block;
			background-color: #c12c2b;
			color: #fff;
			font-weight: 700;
			border-radius: 3px;
			height: 40px;
			line-height: 40px;
			width: 80%;
			font-size: 18px;
		}

		.obp_right-span {
			color: #fff;
			display: block;
			font-size: 16px;
			margin: 10px;
		}
	}

	.obp_pirce {
		text-align: center;
		color: #fff;
		font-size: 16px;
		margin: 10px;

		.del {
			text-decoration: line-through;
		}

		.price {
			color: rgb(255, 0, 0);
			margin-left: 30rpx;
		}
	}

	.public_pay_box {
		position: relative;
		padding: 0 10px 10px;
	}

	.wxPay {
		width: unset;
		border-style: solid;
		border-width: 1px;
		background-size: auto .26rem;
		background-repeat: no-repeat;
		background-position: 50%;
		display: block;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin: 10px 20px 0;
		border-radius: 5px;
		text-indent: -9999em;
		border-color: #3dd174;
		background-color: #3dd174;
		background-image: url();
	}

	.zfbPay {
		width: unset;
		border-style: solid;
		border-width: 1px;
		background-size: auto .26rem;
		background-repeat: no-repeat;
		background-position: 50%;
		display: block;
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin: 10px 20px 0;
		border-radius: 5px;
		text-indent: -9999em;
		border-color: #4088c0;
		background-color: #4088c0;
		background-image: url();
	}


	.bottomLock {
		display: inline-block;
		height: .36rem;
		width: .36rem;
		vertical-align: top;
		margin-right: .05rem;
		background: url() 50% / 80% no-repeat;
	}


	/deep/ .u-notice-bar {
		padding: unset !important;
		line-height: .4rem;
	}

	.main-title {
		font-weight: 700;
		color: #ffe39d;
		font-size: .2rem;
		text-align: center;
		padding: .3rem 0 .05rem;
	}

	.main {
		height: 2.08rem;
		background: url(/static/images/logo/1_bg_top.webp) no-repeat;
		background-size: 100% 100%;
		width: 100%;
	}

	.xingming {
		color: #ffe39d;
		line-height: .24rem;
		font-size: .16rem;
		text-align: center;
	}

	.order-bz1 {
		color: #ffe39d;
		line-height: .24rem;
		font-size: .16rem;
		width: 25%;
		text-align: center;
		opacity: 0;
		animation-name: fade-in-43d40a181;
		animation-duration: .5s;
		animation-timing-function: linear;
		animation-delay: 3s;
		animation-fill-mode: forwards;
	}

	@keyframes fade-in-43d40a181 {
		0% {
			/* 为0时，ios会闪动 */
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	.order-bz2 {
		color: #ffe39d;
		line-height: .24rem;
		font-size: .16rem;
		width: 25%;
		text-align: center;
		opacity: 0;
		animation-name: fade-in-43d40a182;
		animation-duration: .5s;
		animation-timing-function: linear;
		animation-delay: 5s;
		animation-fill-mode: forwards;
	}

	@keyframes fade-in-43d40a182 {
		0% {
			/* 为0时，ios会闪动 */
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	.order-bz3 {
		color: #ffe39d;
		line-height: .24rem;
		font-size: .16rem;
		width: 25%;
		text-align: center;
		opacity: 0;
		animation-name: fade-in-43d40a183;
		animation-duration: .5s;
		animation-timing-function: linear;
		animation-delay: 7s;
		animation-fill-mode: forwards;
	}

	@keyframes fade-in-43d40a183 {
		0% {
			/* 为0时，ios会闪动 */
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	.order-bz4 {
		color: #ffe39d;
		line-height: .24rem;
		font-size: .16rem;
		width: 25%;
		text-align: center;
		opacity: 0;
		animation-name: fade-in-43d40a184;
		animation-duration: .5s;
		animation-timing-function: linear;
		animation-delay: 9s;
		animation-fill-mode: forwards;
	}

	@keyframes fade-in-43d40a184 {
		0% {
			/* 为0时，ios会闪动 */
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	.order-bz__sub {
		position: relative;
		width: .26rem;
		margin: 0 auto;
		text-align: center;
		padding-bottom: .2rem;
		background: linear-gradient(180deg, #daaa78 0, hsla(31, 57%, 66%, 0));
		color: #ffe39d;
		line-height: .24rem;
		font-size: .16rem;
	}

	.year {
		background-color: #fff;
		width: .26rem;
		height: .26rem;
		line-height: .26rem;
		font-size: .14rem;
		border-radius: 50%;
		color: #c43;
		position: absolute;
		top: -.1rem;
		display: block;
	}

	.J_bz1 {
		color: #fff;
		font-weight: 500;
		padding-top: .2rem;
		display: block;

	}

	.box {
		display: flex;
	}

	.order-loading {
		font-size: .16rem;
		text-align: center;
		color: #ffe39d;
		white-space: nowrap;
		overflow: hidden;
		animation: ballText 4s steps(14) forwards;
	}

	.order-wheel {
		font-weight: 700;
		position: relative;
		margin: .1rem auto;
		width: 3.2rem;
		height: 3.2rem;
	}

	.order-wheel__outer {
		position: absolute;
		top: .1rem;
		left: .1rem;
		width: 3rem;
		height: 3rem;
		box-sizing: border-box;
		border-radius: 50%;
		background-color: #ffe29d;
		overflow: hidden;
		box-shadow: inset 0 0 .15rem #ffcb70;
		border: 1px solid #dfa56b;
		transition: all 1.5s linear;
	}

	.pay {
		min-height: 100vh;
		position: relative;
	}

	.active {
		display: inline;
		position: absolute;
		width: 1.5rem;
		height: 1.5rem;
		right: 0;
		top: 0;
		transform-origin: 0 100%;
		color: #974325;
	}

	.active:before {
		content: "";
		position: absolute;
		font-size: .18rem;
		font-family: Microsoft YaHei;
		width: .26rem;
		height: .26rem;
		left: .2rem;
		top: .7rem;
		text-align: center;
		transform: skewY(60deg) rotate(15deg);
		background: url(/static/images/logo/icon_bz.webp) no-repeat;
		background-size: .3rem auto;
	}


	.activitys {
		background-position: 0 0;
		transform: rotate(-15deg) skewY(-60deg);
		font-weight: 700;
		font-size: 0.14rem;
	}

	.activitys:before {
		transform: skewY(60deg) rotate(15deg);
		background: url(/static/images/logo/icon_bz_active.webp) no-repeat;
		background-size: .3rem auto;
	}

	.selected1 {
		transform: rotate(-15deg) skewY(-60deg);
	}

	.selected1:before {
		background-position: 0 -.0rem;
	}

	.selected2 {
		transform: rotate(15deg) skewY(-60deg);
	}

	.selected2:before {
		background-position: 0 -.3rem;
	}

	.selected3 {
		transform: rotate(45deg) skewY(-60deg);
	}

	.selected3:before {
		background-position: 0 -.6rem;
	}

	.selected4 {
		transform: rotate(75deg) skewY(-60deg);
	}

	.selected4:before {
		background-position: 0 -.9rem;
	}

	.selected5 {
		transform: rotate(105deg) skewY(-60deg);
	}

	.selected5:before {
		background-position: 0 -1.2rem;
	}

	.selected6 {
		transform: rotate(135deg) skewY(-60deg);
	}

	.selected6:before {
		background-position: 0 -1.5rem;
	}

	.selected7 {
		transform: rotate(165deg) skewY(-60deg);
	}

	.selected7:before {
		background-position: 0 -1.8rem;
	}

	.selected8 {
		transform: rotate(195deg) skewY(-60deg);
	}

	.selected8:before {
		background-position: 0 -2.1rem;
	}

	.selected9 {
		transform: rotate(225deg) skewY(-60deg);
	}

	.selected9:before {
		background-position: 0 -2.4rem;
	}

	.selected10 {
		transform: rotate(255deg) skewY(-60deg);
	}

	.selected10:before {
		background-position: 0 -2.7rem;
	}

	.selected11 {
		transform: rotate(285deg) skewY(-60deg);
	}

	.selected11:before {
		background-position: 0 -3rem;
	}

	.selected12 {
		transform: rotate(315deg) skewY(-60deg);
	}

	.selected12:before {
		background-position: 0 -3.3rem;
	}

	.order-wheel__inner {
		position: absolute;
		top: .5rem;
		left: .5rem;
		width: 2.2rem;
		height: 2.2rem;
		box-sizing: border-box;
		border-radius: 50%;
		background-color: #fff7e3;
		overflow: hidden;
		border: 1px solid #e1a971;
		transition: all 1.5s linear;
	}


	.active1 {
		position: absolute;
		width: 1.1rem;
		height: 1.1rem;
		right: 0;
		top: 0;
		color: #864a30;
		transform-origin: 0 100%;
	}

	.active1:before {
		content: attr(title);
		position: absolute;
		font-size: .16rem;
		font-family: Microsoft YaHei;
		width: .26rem;
		height: .26rem;
		left: .15rem;
		top: .5rem;
		text-align: center;
		transform: skewY(54deg) rotate(18deg);
		opacity: 1;
	}

	.activityes {
		color: #da3c2e;
	}

	.selecteds1 {
		transform: rotate(-18deg) skewY(-54deg);
	}

	.selecteds2 {
		transform: rotate(18deg) skewY(-54deg);
	}

	.selecteds3 {
		transform: rotate(54deg) skewY(-54deg);
	}

	.selecteds4 {
		transform: rotate(90deg) skewY(-54deg);
	}

	.selecteds5 {
		transform: rotate(126deg) skewY(-54deg);
	}

	.selecteds6 {
		transform: rotate(162deg) skewY(-54deg);
	}

	.selecteds7 {
		transform: rotate(198deg) skewY(-54deg);
	}

	.selecteds8 {
		transform: rotate(234deg) skewY(-54deg);
	}

	.selecteds9 {
		transform: rotate(270deg) skewY(-54deg);
	}

	.selecteds10 {
		transform: rotate(306deg) skewY(-54deg);
	}

	.order-wheel__center {
		position: absolute;
		width: 1.5rem;
		height: 1.5rem;
		z-index: 4;
		top: 50%;
		left: 50%;
		margin-left: -.75rem;
		margin-top: -.75rem;
		border-radius: 50%;
		box-sizing: border-box;
		background: url(/static/images/logo/m_xuan_center.webp) no-repeat;
		background-size: 100%;
		border: 1px solid #ce7f54;
	}

	.J_item11 {
		display: none;
		padding-top: .15rem;
		color: #fff;
		width: 100%;
		height: 100%;
		line-height: .24rem;
		font-size: .16rem;
	}

	.delay250 {
		animation-delay: .25s;
	}

	.fade-in {
		opacity: 0;
		animation-name: fade-in-43d40a18;
		animation-duration: .5s;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}

	.order-top-title {
		font-weight: 700;
		color: #fff;
		font-size: .2rem;
		text-align: center;
		padding: .3rem 0 .05rem;
	}

	@keyframes fade-in-43d40a18 {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.order-top-words {
		text-align: center;
		font-size: .16rem;
		line-height: .3rem;
	}

	.order-wrap {
		display: none;
		position: relative;
		margin-top: -30%;
		font-size: 0.14rem;

		.order-pay {
			margin: .2rem .1rem 0;
			background-color: #ffeec6;
			border-radius: .06rem;
			padding: .2rem .1rem;
			overflow: hidden;

			.order-pay__title {
				margin: 0 .3rem;

				.m-img {
					display: block;
					width: 100%;
				}
			}
		}

	}

	.order-pay__con {
		margin-top: .2rem;
		border: 1px solid #d5bb7e;
		border-radius: .06rem;
		background-color: #fffcf4;

		.opc__top {
			padding: .1rem;
			border-bottom: 1px solid #fbdccb;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.opc__left {
				font-size: .12rem;

				.money {
					color: #ea2929;

					.monery-xsyh {
						font-size: .14rem;
						color: #333;
					}

					.money-num {
						font-size: .18rem;
						font-weight: 700;
					}
				}
			}

			.opc__right {
				display: flex;

				.youhui {
					display: inline-block;
					margin-left: .1rem;
				}

				.time {
					display: inline-block;
					margin-left: .1rem;
					font-weight: 700;
				}
			}
		}

		.opc__bottom {
			overflow: hidden;
			padding: .1rem;

			.opc__bottom-text {
				color: #ea2929;
				font-weight: 700;
			}
		}
	}

	.public_pay_box {
		position: relative;
		padding: 0 .1rem .08rem;

		.pay_wx {
			display: block;
			height: .4rem;
			line-height: .4rem;
			text-align: center;
			margin: .1rem .05rem 0;
			border-radius: .05rem;
			text-indent: -9999em;
			border-style: solid;
			border-width: 1px;
			background-size: auto .26rem;
			background-repeat: no-repeat;
			background-position: 50%;
			border-color: #3dd174;
			background-color: #3dd174;
			background-image: url();
		}

		.pay_zfb {
			display: block;
			height: .4rem;
			line-height: .4rem;
			text-align: center;
			margin: .1rem .05rem 0;
			border-radius: .05rem;
			text-indent: -9999em;
			border-style: solid;
			border-width: 1px;
			background-size: auto .26rem;
			background-repeat: no-repeat;
			background-position: 50%;
			border-color: #4088c0;
			background-color: #4088c0;
			background-image: url();
		}
	}

	.public_pay_tip {
		text-align: center;
		color: red;
		padding: 0 0 .1rem;
		font-size: .13rem;
	}

	.order-lock {
		margin: .1rem .1rem 0;
		background-color: #ffeec6;
		border-radius: .06rem;
		padding: .2rem .1rem;
		overflow: hidden;

		.order-lock__title {
			text-align: center;

			.order-lock__title-get {
				display: inline-block;
				color: #ea2929;
				font-size: .24rem;
				height: .42rem;
				line-height: .42rem;
				border-radius: .06rem;
				background-color: #fffced;
				border: 1px solid #ecc361;
				padding: 0 .25rem;
			}
		}
	}

	.ol-box {
		position: relative;
		margin-top: .2rem;
		padding-top: .3rem;
		background: url(/static/images/logo/1_bg_mask.47556262.png) no-repeat top;
		background-size: 100% auto;

		.ol-box__title {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background: url() no-repeat;
			width: 2.09rem;
			height: .4rem;
			line-height: .4rem;
			background-size: 100% 100%;
			text-align: center;
			font-size: .18rem;
			color: #fff;
			font-weight: 700;
		}

		.ol-box__con {
			margin: 0 .1rem;
			background-color: #fff;
			padding: .2rem;
			box-shadow: 0 3px 3px #d7cdb4;
			line-height: .24rem;
		}

		.J_payPopupShow {
			background: url(/static/images/logo/1_btn_lock.0f5339ad.png) no-repeat top;
			width: 1.22rem;
			height: .31rem;
			background-size: 100% 100%;
			display: block;
			margin: .1rem auto 0;
		}
	}

	.red {
		color: #ef2b16;
		font-weight: 700;
	}

	.public_foot_xin {
		width: 100%;
		margin: 0 auto;
		display: block;
	}

	.public_foot_al {
		width: 50%;
		margin: 0 auto;
		display: block;
	}

	.public_paybottom_height {
		height: .6rem;

	}

	.public_pay_bottom {
		position: fixed;
		bottom: 0;
		left: 50%;
		width: 100%;
		height: .6rem;
		line-height: .46rem;
		text-align: center;
		font-size: .18rem;
		color: #fff;
		z-index: 39;
		max-width: 640px;
		background-color: rgba(0, 0, 0, .5);
		transform: translateX(-50%);
		display: block;
		transition: opacity 0.5s ease-in-out;

	}

	.public_pay_bottom-text {
		margin: .06rem .1rem 0;
		height: .5rem;
		text-indent: -9999px;
		background: url(/static/images/logo/1_btn.webp) no-repeat top;
		background-size: auto .5rem;
		line-height: .36rem;
		display: block;
		font-size: .16rem;
		color: #fff;
		border-radius: .05rem;
	}

	.public_footer_servers {
		color: rgb(108, 108, 108);
		background: rgb(108, 108, 108);
		text-align: center;
		padding: .2rem 0;
		font-size: .14rem;
	}

	.public_pay_bottom-span--hidden {
		opacity: 0;
		pointer-events: none;
	}

	.btn-style {
		background-color: #864a30;
		color: #FFFFFF;
		margin-top: 20px;
		border-radius: 20px;

	}

	.uv-qrcode {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 30px;
	}

	.payButton {
		background-color: #864a30;
		color: #FFFFFF;
		width: 50%;
		margin-top: 20px;
		border-radius: 20px;
	}
</style>